<template>
    <view class='page'>
        <view class="notice" :style="{'top' : Top+'px'}">
            <u-notice-bar :text="text1" mode="closable" color="#ffffff" bgColor="#F56C6C" :show="noticeShow" @close="close"></u-notice-bar>

            <!-- <button @click="toggleNotice">dakai</button> -->
        </view>
    </view>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import store from '@/store';
import playMp3 from "@/utils/play_ding.js"
export default {
    components: {},
    data() {
        return {
            Top: 0,
            text1: '您有新的订单,请注意查收！',
            // noticeShow: false,
        };
    },
    created() {
        this.getTop()
    },
    computed: {
        ...mapGetters(['receivePush']),
        ...mapState({
            isPush: state => state.user.isPush,
        }),
        noticeShow: {
            get() { return this.isPush },
            set(val) { }
        }
    },
    watch: {
        receivePush: {
            handler(val) {
                if (val) {
                    store.commit('SET_ISPUSH', true)
                    uni.vibrateLong();
                    playMp3.play_ding('https://yl.weilankangyang.com/static/mini_program/dingdan.mp3', 15000)
                }
            }
        }
    },
    methods: {
        getTop() {
            uni.getSystemInfo({
                success: (res) => {
                    // 获取手机顶部状态栏的高度
                    const statusBarHeight = res.statusBarHeight || 0;
                    // 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
                    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
                    const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;

                    // 计算顶部图标距离
                    const topIconDistance = statusBarHeight + navBarHeight;
                    this.Top = topIconDistance
                },
                fail: (err) => {
                    console.error('获取系统信息失败:', err);
                },
            });
        },
        close() {
            store.commit('SET_ISPUSH', false)
        }
    },
};
</script>
<style scoped lang='scss'>
.notice {
  position: fixed;
  width: 100%;
  //   top: 120rpx;
  left: 0;
  z-index: 9999999;
}
</style>